<!DOCTYPE html>
<html class="iframe-h">

<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>网站后台管理模版</title>
	<link rel="stylesheet" type="text/css" href="/public/static/admin/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/public/static/admin/css/admin.css" />
	<meta name="referrer" content="no-referrer" /><!-- 头部403 -->
	<script src="/public/static/admin/js/jquery.js"></script>
	<script src="/public/static/button.js" type="text/javascript" charset="utf-8"> </script>
	<style>
		body .layer-test {
			background: none;
			box-shadow: none;
		}

		/* 定制化 */
		html .layui-layer-demo {
			background-color: #eee;
		}

		.layui-layer-demo .layui-layer-title {
			border: none;
			background-color: #333;
			color: #fff;
		}

		.long-hidde {
			/* 超出隐藏 */
			width: 20%;
			/* 要显示文字的宽度 */
			float: left;
			/* 左对齐，不设置的话只在IE下好用 */
			overflow: hidden;
			/* 超出的部分隐藏起来 */
			white-space: nowrap;
			/* 不显示的地方用省略号...代替 */
			text-overflow: ellipsis;
			/* 支持 IE */
			-o-text-overflow: ellipsis;
			/* 支持 Opera */
		}
	</style>
	<script src="/public/static/admin/js/layer/layer.js"></script>
</head>

<body>
	<div class="wrap-container clearfix">
		<div class="column-content-detail">
			<form class="layui-form">
				<div class="layui-form-item">
					<div class="layui-inline tool-btn">
						<button type="button" class="layui-btn layui-btn-small layui-btn-warm abnormal-area hidden-xs">
							<i class="iconfont">&#xe601;</i>
						</button>
					</div>
					<div class="layui-inline">
						<input type="text" id="select_title" placeholder="请输入标题" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-inline">
						<select id="states" lay-filter="status">
							<option value="0">正常</option>
							<option value="1">待审核</option>
							<option value="2">已删除</option>
						</select>
					</div>
					<button class="layui-btn layui-btn-normal condition-search" type="button">筛选</button>
				</div>

			</form>
			<div class="layui-form" id="table-list">
				<table class="layui-table" lay-even lay-skin="nob">
					<colgroup>
						<col width="50">
						<col class="hidden-xs" style="max-width: 70;">
						<col class="hidden-xs" style="max-width: 100;">
						<col>
						<col class="hidden-xs" style="max-width: 150;">
						<col class="hidden-xs" style="max-width: 150;">
						<col class="hidden-xs" style="max-width: 150;">
						<col class="hidden-xs" style="max-width: 150;">
						<col style="max-width: 80;">
						<col style="max-width: 170;">
					</colgroup>
					<thead>
						<tr>
							<th>
								<input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose">
							</th>
							<th style="text-align:center;" class="hidden-xs">缩略图</th>
							<th style="text-align:center;">名称</th>
							<th style="text-align:center;">作者</th>
							<th style="text-align:center;" class="hidden-xs">ID</th>
							<th style="text-align:center;" class="hidden-xs">标签</th>
							<th style="text-align:center;" class="hidden-xs">分类</th>
							<th style="text-align:center;" class="hidden-xs">创建时间</th>
							<th style="text-align:center;">状态</th>
							<th style="text-align:center;">操作</th>
							<th style="text-align:center;">备注</th>
						</tr>
					</thead>
					<tbody name='comicsList'>
						{volist name='comicsList' id='comics_List'}
						<tr>
							<td>
								<input type="checkbox" name="" lay-skin="primary" data-id="{$comics_List.id}">
							</td>
							<td class="hidden-xs">
								<img width="150" src="{$springboard}{$comics_List.file_server}{$comics_List.path}">
							</td>
							<td>{$comics_List.title}</td>
							<td>{$comics_List.author}</td>
							<td class="hidden-xs" title="{$comics_List._id}">鼠标悬浮查看</td>
							<td class="hidden-xs">{:generateTags($comics_List.tags)}</td>
							<td align="center" class="hidden-xs">{:generateTags($comics_List.categories)}</td>
							<!-- 这里有两个办法 通过服务器返回 或者通过调用js里的返回  -->
							<td class="hidden-xs">{:iSO_8601ToNewData($comics_List.created_at)}</td>
							<td>
								<button class="layui-btn layui-btn-mini layui-btn-normal">正常</button>
							</td>
							<td>
								<div class="layui-inline" data-book-id="{$comics_List._id}"
									data-title="{$comics_List.title}">
									<button title="章节操作"
										class="layui-btn layui-btn-small layui-btn-normal get-comics-son-project">
										<i style="color: #fff;" class="layui-icon">&#xe60a;</i>
									</button>
									<button title="编辑信息" class="layui-btn layui-btn-small layui-btn-normal edit-comics">
										<i class="layui-icon">&#xe642;</i>
									</button>
									<button title="删除" class="layui-btn layui-btn-small layui-btn-danger delete-comics"
										data-url="article-detail.html">
										<i class="layui-icon">&#xe640;</i>
									</button>
								</div>
							</td>
							<td>
								无备注
							</td>
						</tr>
						{/volist}
					</tbody>
				</table>
				<div name='page_list'>
					{:generatePaging($ComicsListCount,$page)}
				</div>
				<!-- <div class="page-wrap">
					<ul class="pagination">
						<li class="disabled">
							<span>«</span>
						</li>
						<li class="active">
							<span>1</span>
						</li>
						<li>
							<a href="#">2</a>
						</li>
						<li>
							<a href="#">»</a>
						</li>
					</ul>
				</div> -->

			</div>
		</div>
	</div>
	<script src="/public/static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	<script src="/public/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="/public/static/admin/js/main.js" type="text/javascript" charset="utf-8"></script>

	<script>
		var controller = "{$url}serverLocalhost/"; //当前控制器路径
		//编辑文章点击事件
		$(document).on("click", "button.edit-comics", function () {
			bookId = $(this).parent().attr('data-book-id');
			var title = $(this).parent().attr('data-title');
			window.parent.InsertNewTab(
				"编辑文章 - " + title,
				controller + 'EditComicsInfo',
				"edit-comics-", bookId, {
				extendsParameter: {
					'HiddenFrom': true,
					'FromType': "EditComicsInfo",
					'FromParameter': {
						"bookId": bookId,
					}
				}
			});
		})
		//编辑漫画获取漫画子章节
		$(document).on("click", "button.get-comics-son-project", function () {
			bookId = $(this).parent().attr('data-book-id');
			$.ajax({
				type: "POST",
				dataType: "json",
				url: "{$url}serverLocalhost/getComicsSonProject",
				data: {
					'bookId': bookId, //书籍id
				},
				success: function (response) {
					// $listBottom = '';
					$list = '';
					$str = '';
					$.each(response.comicsSonProject, function (i, v) {
						console.log(v
							.chapter_id);
						/* $listBottom +=
							'<botton title=' + v.title + ISO8601DateStr2Date(v.updated_at) +
							' data-project-id=' + v
							.chapter_id + //分卷id
							' class="layui-btn layui-btn-primary" ' +
							' data-book-id=' + bookId +
							' style="margin-left:5px;margin-top:5px;" lay-submit="" lay-filter="formDemo">' +
							v.project_title + '</botton>'; */
						$str = 'data-project-id=' + v
							.chapter_id + //分卷id
							' data-book-id=' + bookId +
							' data-project-title=' + v.project_title +
							' data-project-order=' + v.order;
						$list += '<tr>' +
							'<td style="text-align:center;"  class="hidden-xs">' + v.order +
							'</td>' +
							'<td>' + v.project_title + '</td>' +
							'<td>' + ISO8601DateStr2Date(v.updated_at) + '</td>' +
							'<td><button class="layui-btn layui-btn-mini layui-btn-normal table-list-status" data-status="1">显示</button></td>' +
							'<td>' +
							'<div class="layui-inline">' +
							'<button ' + $str +
							' class="layui-btn layui-btn-mini layui-btn-normal bottin-comics-son-project ">' +
							'<i class="layui-icon"></i>' +
							'</button>' +
							'<button ' + $str +
							' class="layui-btn layui-btn-mini layui-btn-danger" >' +
							'<i class="layui-icon"></i>' +
							'</button>' +
							'</div>' +
							'</td>' +
							'</tr>';
					});
					layer.open({
						type: 0,
						skin: 'layui-layer-demo', //样式类名
						closeBtn: 0, //不显示关闭按钮
						anim: 2,
						maxWidth: '85%',
						maxHeight: '50%',
						// area: ['50%', '50%'],
						shadeClose: false, //开启遮罩关闭
						content:
							/* '<div style="max-width:100%">' +
							'<li style="text-align:center;" class="layer-area">' +
							'<button style="width:100%;" data-book-id=' + bookId +
							' class="layui-btn layui-btn-normal add-project" lay-submit="search">创建漫画</button>' +
							'<div style="text-align:center;">请选择要查看的章节</div>' +
							$listBottom +
							'</li>' +
							'</div>' */
							'<div class="layui-form-item">' +
							'<div class="layui-inline tool-btn">' +
							'<button class="layui-btn layui-btn-small layui-btn-normal go-btn hidden-xs" data-url="danye-detail.html"><i class="layui-icon"></i></button>' +
							'<button class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs" data-url="/admin/category/listorderall.html"><i class="iconfont"></i></button>' +
							'</div>' +
							'<div class="layui-inline">' +
							'<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">' +
							'</div>' +
							'<button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>' +
							'</div>' +
							'<div class="layui-form" id="table-list">' +
							'<table class="layui-table" lay-even="" lay-skin="nob">' +
							'<colgroup>' +
							'<col class="hidden-xs" width="100">' +
							'<col>' +
							'<col class="hidden-xs" width="200">' +
							'<col width="80">' +
							'<col width="150">' +
							'</colgroup>' +
							'<thead>' +
							'<tr>' +
							'<th style="text-align:center;"  class="hidden-xs">排序</th>' +
							'<th>分卷名</th>' +
							'<th>创建时间</th>' +
							'<th>状态</th>' +
							'<th>操作</th>' +
							'</tr>' +
							'</thead>' +
							'<tbody>' +
							'<tr class="add-project-tr">' +
							'<td colspan="7" style="text-align:center;"><button style="width:100%;" class="add-project-button layui-btn layui-btn-fluid layui-btn-normal table-list-status" data-book-id=' +
							bookId +
							'>创建分卷</button></td>' +
							'</tr>' +
							$list +
							'</tbody>' +
							'</table>' +
							'<div class="page-wrap">' +
							'<ul class="pagination">' +
							'<li class="disabled"><span>«</span></li>' +
							'<li class="active"><span>1</span></li>' +
							'<li>' +
							'<a href="#">2</a>' +
							'</li>' +
							'<li>' +
							'<a href="#">»</a>' +
							'</li>' +
							'</ul>' +
							'</div>' +
							'</div>',
					});
				}
			});
		});


		/**
		 * 跳转页面
		 */
		function locationHref($page, $title = undefined, $status = 0) { //获取下一页

			var index = layer.open({
				type: 1,
				title: false,
				closeBtn: 0,
				shadeClose: false,
				skin: 'layer-test',
				content: '<div><img width="150" src="https://i0.hdslb.com/bfs/album/7f85abf4f2c87b70589e4b5a0b1d8fb340c0f2d4.gif"> <h1 style="text-align:center;font-size:30px;color:rgb(255,255,255);">拼命加载中</h1></div>'
			});
			$.ajax({
				type: "get",
				url: "{$url}serverLocalhost/getComicsList",
				data: {
					"page": $page,
					"title": $title,
					"status": $status,
				},
				dataType: "Json",
				success: function (response) {
					$("div[name='page_list']").html(response.page);
					$("tbody[name='comicsList']").empty();
					$.each(response.comicsList, function (i, v) {
						console.log(v);

						if (v.state == 0) {
							switch (v.exp_state) { //1待站长审核 2 被删除
								case 1:
									$msg = '待审核'
									$expButton =
										'<button title="删除漫画" class="layui-btn layui-btn-small layui-btn-normal delete-comics"' +
										'data-id="' + v._id + '" data-title="' + v.title +
										'" >' +
										'<i class="layui-icon">&#xe642;</i>' +
										'</button>';
									break;
								case 2:
									$msg = '被删除'
									$expButton =
										'<br><button title="恢复漫画" class="layui-btn layui-btn-small layui-btn-normal recovery-comics">' +
										'<i class="iconfont">&#xe60d;</i>' +
										'</button>' +
										'<button title="永久删除" class="layui-btn layui-btn-small layui-btn-danger enter-delete-comics">' +
										'<i class="iconfont">&#xe601;</i>' +
										'</button>';
									break;

								default:
									$msg = '未定义'
									$expButton = '';
									break;
							}
						} else {
							$msg = '正常'
							$expButton =
								'<button title="删除" class="layui-btn layui-btn-small layui-btn-danger delete-comics"' +
								'data-id="' + v._id + '">' +
								'<i class="layui-icon">&#xe640;</i>' +
								'</button>';

						}
						$("tbody[name='comicsList']").append(
							'<tr>' +
							'<td>' +
							'<input type="checkbox" name="1" lay-skin="primary" data-id="' + v._id +
							'">' +
							'</td>' +
							'<td class="hidden-xs">' +
							'<img width="150"' +
							'src="{$springboard}' + v.file_server + v.path +
							'">' +
							'</td>' +
							'<td>' + v.title + '</td>' +
							'<td class="hidden-xs">' + v.author + '</td>' +
							'<td class="hidden-xs" title="' + v._id + '">鼠标悬浮查看</td>' +
							'<td class="hidden-xs">' + generateTags(v.tags) +
							'</td>' +
							'<td class="hidden-xs">' + generateTags(v.categories) +
							'</td>' +
							'<td class="hidden-xs">' + ISO8601DateStr2Date(v.created_at) +
							'</td>' +
							'<td>' +
							'<button class="layui-btn layui-btn-mini layui-btn-normal">正常</button>' +
							'</td>' +
							'<td style="text-align:center;">' +
							'<div data-book-id="' + v._id + '" data-title="' + v.title +
							'" class="layui-inline">' +
							'<button title="分卷列表" class="layui-btn layui-btn-small layui-btn-normal get-comics-son-project">' +
							'<i style="color: #fff;" class="layui-icon">&#xe60a;</i>' +
							'</button>' +
							'<button title="编辑漫画" class="layui-btn layui-btn-small layui-btn-normal edit-comics">' +
							'<i class="layui-icon">&#xe642;</i>' +
							'</button>' +
							$expButton +
							'</div>' +
							'</td>' +
							'<td>' + $msg +
							'</td>' +
							'</tr>'
						);
					});
					layer.close(index);
				}
			})
		}

		function generateTags($Tags) { //生成标签点击
			if ($Tags == '') {
				return '';
			}
			$explodeTags = $Tags.split(',');
			$returnInfo = "";
			$.each($explodeTags, function (i, v) {
				$returnInfo += "<a href='#" + v + "'>" + v + "</a>,";
			})
			$returnInfo = $returnInfo.substring(0, $returnInfo.length - 1);
			return $returnInfo;
		}

		function ISO8601DateStr2Date(string) { //iso8601转时间戳
			var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" +
				"(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?" +
				"(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
			if (string) {
				var d = string.match(new RegExp(regexp));
				var offset = 0;
				var date = new Date(d[1], 0, 1);

				if (d[3]) {
					date.setMonth(d[3] - 1);
				}
				if (d[5]) {
					date.setDate(d[5]);
				}
				if (d[7]) {
					date.setHours(d[7]);
				}
				if (d[8]) {
					date.setMinutes(d[8]);
				}
				if (d[10]) {
					date.setSeconds(d[10]);
				}
				if (d[12]) {
					date.setMilliseconds(Number("0." + d[12]) * 1000);
				}
				if (d[14]) {
					offset = (Number(d[16]) * 60) + Number(d[17]);
					offset *= ((d[15] == '-') ? 1 : -1);
				}
				offset -= date.getTimezoneOffset();
				var time = (Number(date) + (offset * 60 * 1000)) / 1000;
				return formatDateTime(time);
			} else {
				return null;
			}

			function formatDateTime(timeStamp) { //时间戳转时间
				var date = new Date();
				date.setTime(timeStamp * 1000);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				return y + '-' + m + '-' + d + '&nbsp;' + h + ':' + minute + ':' + second;
			};

		}
	</script>
</body>

</html>